<template>
	<view class="booking">
		<navBar/>
		<!-- 返回 -->
		<Nav :title="title" filtertitle="样品测试查询" :inpdata="inputData" @finsh='onFinshData' />
		<!-- tabs -->
		<div class="tabs">
			<text class="item" :class="(activeIndex == index) ? 'cursor' : ''" v-for="(item, index) in sampleTabs" :key="item.id" @click="setActiveIndex(index)">
				{{ item.title }}
			</text>
		</div>
		<!-- 滑动容器 -->
		<swiper class="swiper" :current="activeIndex" @change="onSwiperChange">
			<!-- 滑动项 v-for="(item,index) in orderTabs" :key="item.id"-->
			<swiper-item class="swiper-item">
				<!-- 样品详情 v-show="activeIndex == 0" -->
				<view class="orderinfo">
					<view class="bkitem">
						<view class="bkrol bkdjs">
							<text class="colorb">样品编号：<text class="sheetc">{{ sampleInfo.sampleNum }}</text></text>
							<text class="status bgf">{{ Satus(sampleInfo.status) }}</text>
						</view>
						<view class="bkrol">
							原样编号：<text class="names">{{ sampleInfo.originalSampleNum }}</text>
						</view>
						<view class="bkrol">
							<text class="colors">测试计划名称：<text class="colorb">{{ sampleInfo.testPlanName }}</text></text>
						</view>
						<view class="bkrol">
							<text class="colors">所选方案：<text class="colorb">{{ sampleInfo.selectedScheme }}</text></text>
						</view>
						<view class="bkrol">
							<text class="colors">样品名称：<text class="colorb">{{ sampleInfo.sampleName }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">样品日期：<text class="colorb">{{ sampleInfo.sampleDate }}</text></text>
							<text class="colors">到期日期：<text class="colorb">{{ sampleInfo.dueDate }}</text></text>
						</view>
						<view class="bkrol">
							<text class="colors">基质：<text class="colorb">{{ sampleInfo.baseMaterial }}</text></text>
						</view>
						<view class="bkrol">
							<text class="colors">基质路径：<text class="colorb">{{ sampleInfo.baseMaterialPath }}</text></text>
						</view>
						<!-- <view class="bkrol txr">
							<text>创建时间：{{ sampleInfo.sampleNum }}</text>
						</view> -->
					</view>
				</view>
			</swiper-item>
			<swiper-item class="swiper-item" >	
				<view  class="orderinfo">
					<!-- 样品分析项信息-->
					<view class="bkitem" v-for="(item,index) in textList" :key="index">
						<view class="bkrol bkdjs">
							<text class="colorb">测试代码：<text class="sheetc">{{ item.testCode }}</text></text>
							<!-- <text class="status bgf">{{ item.testCode }}</text> -->
						</view>
						<view class="bkrol">
							根测试名称：<text class="names">{{ item.testCode }}</text>
						</view>
						<view class="bkrol">
							外包测试：<text class="names">{{ item.testCode }}</text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">测试名称：<text class="colorb">{{ item.testName }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">测试状态：<text class="status">{{ item.testCode }}</text></text>
							<text class="colors">版本：<text class="colorb">{{ item.version }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">站点：<text class="colorb">{{ item.dept }}</text></text>
							<text class="colors">实验组：<text class="colorb">{{ item.serverGroup }}</text></text>
						</view>
						<view class="bkrol bkdjs">
							<text class="colors">添加方式：<text class="colorb">{{ item.addMethod }}</text></text>
							<text class="colors">方法：<text class="colorb">{{ item.method }}</text></text>
						</view>
						<view class="bkrol">
							<text class="colors">版本名称：<text class="colorb">{{ item.versionName }}</text></text>
						</view>
						<!-- <uni-collapse ref="collapse">
							<uni-collapse-item title="附件：" >
								<view class="bkdjs pd10" v-for="(atts,indexs) in item.attach" :key="indexs">
									<text>{{ atts.attName }}</text>
									<view class="controls">
										<text class="rolsl" @click="Preview(atts.attURL)">预览</text>
										<text @click="Download(atts.attURL,atts.attName)">下载</text>
									</view>
								</view>
							</uni-collapse-item>
						</uni-collapse> -->
					</view>
				</view>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	// 引入api
	import { 
		getProgramDelegationSamples,// 委托单样品查询
		getProgramQuotationSamples,// 报价单样品查询
		getProgramDeleOrderTest,// 委托单样品测试信息查询
		getProgramQuotationOrderTest,// 报价单样品测试信息查询
	} from "@/proxy/program/program.api.js";
	export default {
		async onLoad(option) {
			if(option.method === "weituo"){
				await Promise.all([
					this.getProgramDelegationSamplesData(option.limsordNo,option.folderNo,option.orderNum), // 委托单样品查询
					this.getProgramDeleOrderTestData(option.limsordNo), // 委托单样品测试信息查询
				])
			}else if(option.method === "baojia"){
				await Promise.all([
					this.getProgramQuotationSamplesData(option.limsordNo,option.folderNo,option.orderNum), // 报价单样品查询
					this.getProgramQuotationOrderTestData(option.limsordNo), // 报价单样品测试信息查询
				])
			}
			this.method = option.method;
			this.limsordNo = option.limsordNo;
			// this.folderNo = option.folderNo;
			// this.orderNum = option.orderNum;
			// console.log("获取到的参数",option)
		},
		data(){
			return{
				title:"加载中...", // 标题
				method:"", // 请求方式
				// folderNo:"", // LMS订单编号
				limsordNo:"", // LMS样品编号
				// orderNum:"", // 样品编号
				sampleInfo:{},
				sampleTabs: [
					{
						id:1,
						title: '样品详情'
					},
					{
						id:2,
						title: '样品测试'
					},
				],
				textList:[], // 样品测试结果
				// activeIndex: this.orderTabs.findIndex(v => v.orderState === Number(0)),
				activeIndex: 0,
				inputData:[
					{
						title: "测试名称",
						placeholder:"请输入测试名称",
						inpValue:"",
						key: "testName", //键名 接收对象名字
					},
					{
						title: "测试代码",
						placeholder:"请输入测试代码",
						inpValue:"",
						key: "testCode", //键名 接收对象名字
					}
				]
			}
		},
		methods:{
			// 筛选后的值
			async onFinshData(data){
				// console.log('父组件接收子组件返回的筛选值',data)
				if(this.method === "weituo"){
					await Promise.all([
						// this.getProgramDelegationSamplesData(this.limsordNo,this.folderNo,this.orderNum), // 委托单样品查询
						this.getProgramDeleOrderTestData(this.limsordNo,data.testName,data.testCode), // 委托单样品测试信息查询
					])
				}else if(this.method === "baojia"){
					await Promise.all([
						// this.getProgramQuotationSamplesData(this.limsordNo,this.folderNo,this.orderNum), // 报价单样品查询
						this.getProgramQuotationOrderTestData(this.limsordNo,data.testName,data.testCode), // 报价单样品测试信息查询
					])
				}
			},
			// 委托单样品查询
			async getProgramDelegationSamplesData(limsordNo,folderNo,orderNum){
				const { customerCode,businessName } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramDelegationSamples([{
					 customerCode: customerCode,
					 businessType:businessName,
					 orderNum:orderNum,
					 folderNo:folderNo,
					 ordNo:limsordNo
				  }]);
				  if (result.code == 200) {
					  this.title = '委托单样品编号' + result.data[0].sampleNum;
					  this.sampleInfo = result.data[0];
				      // console.log("委托单样品查询！！！",result);
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "委托单样品查询失败",
				    icon: "error",
				  });
				}
			},
			// 委托单样品测试信息查询
			async getProgramDeleOrderTestData(limsordNo,testName,testCode){
				const { customerCode,businessName } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramDeleOrderTest([{
					 limsOrdNo:limsordNo,
					 testName:testName,
					 testCode:testCode,
				  }]);
				  if (result.code == 200) {
					  this.textList = result.data;
				      // console.log("委托单样品测试信息查询！！！",result);
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "委托单样品测试查询失败",
				    icon: "error",
				  });
				}
			},
			// 报价单样品查询
			async getProgramQuotationSamplesData(limsordNo,folderNo,orderNum){
				const { customerCode,businessName } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramQuotationSamples([{
					 customerCode: customerCode,
					 businessType:businessName,
					 orderNum:orderNum,
					 folderNo:folderNo,
					 ordNo:limsordNo
				  }]);
				  if (result.code == 200) {
					  this.title = '报价单样品编号' + result.data[0].sampleNum;
					  this.sampleInfo = result.data[0];
				      // console.log("报价单样品查询！！！",result);
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "报价单样品查询失败",
				    icon: "error",
				  });
				}
			},
			// 报价单样品测试信息查询
			async getProgramQuotationOrderTestData(limsordNo,testName,testCode){
				const { customerCode,businessName } = uni.getStorageSync("userInfo");
				if(!customerCode){
					return this.$toast({
					  title: "请前往小程序授权登录",
					  // icon: "error",
					});
				}
				// 发送请求
				try {
				  const result = await getProgramQuotationOrderTest([{
					 limsOrdNo:limsordNo,
					 testName:testName,
					 testCode:testCode,
				  }]);
				  if (result.code == 200) {
					  this.textList = result.data;
				      // console.log("报价单样品测试信息查询！！！",result);
				  } else {
				    return this.$toast({
				      title: result.data.msg,
				    });
				  }
				} catch (error) {
				  console.error("请求失败", error);
				  return this.$toast({
				    title: "报价单样品测试查询失败",
				    icon: "error",
				  });
				}
			},
			setActiveIndex(index) {
				this.activeIndex = index;
			},
			onSwiperChange(event) {
				this.activeIndex = event.detail.current;
			},
			// 样品状态
			Satus(status){
				switch (status) {
				    case "Draft":
				        return "草稿";
				        break;
				    case "Planned":
				        return "已计划";
				        break;
				    case "Active":
				        return "已启用";
				        break;
					case "Cancelled":
					    return "已取消";
					    break;
					case "OOS":
					    return "异常";
					    break;
					case "Resulted":
						return "结果";
						break;
					case "Logged":
						return "已记录";
						break;
					case "Prelogged":
						return "预记录";
						break;
					case "Started":
						return "已开始";
						break;	
					case "Done":
					    return "已完成";
					    break;
				    default:
					    return "未知状态";
				}
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: rgb(249,250,251);
		// height: 100vh;
	}
	.booking{
		height: 100vh;
		display: flex;
		flex-direction: column;
	}
	// .tabpos{
	// 	position: sticky;
	// 	z-index: 99;
	// }
	// tabs
	.tabs {
		display: flex;
		justify-content: space-around;
		line-height: 60rpx;
		margin: 15rpx 20rpx;
		background-color: rgb(246, 246, 246);
		box-shadow: 0 4rpx 6rpx rgba(240, 240, 240, 0.6);
		.item {
			flex: 1;
			text-align: center;
			padding: 0 10rpx;
			font-size: 28rpx;
			color: #000;
			border-radius: 60rpx;
		}
		.cursor{
			color: #fff;
			background: #0081ff;
			transition: all 0.4s;
		}
		// .cursor {
		// 	position: absolute;
		// 	left: 0;
		// 	bottom: 0;
		// 	width: 36%;
		// 	height: 6rpx;
		// 	padding: 0 50rpx;
		// 	background-color: #0081ff;
		// 	/* 过渡效果 */
		// 	transition: all 0.4s;
		// }
	}
	.colors{
		color: #6C7381;
	}
	.colorb{
		color: #000;
	}
	.names{
		font-size: 28rpx;
		font-weight: bold;
	}
	.status{
		color: #FFF;
		background: #FF0000;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
	}
	.bgf{
		background: #0081ff;
	}
	.showd{
		text-align: right;
		width: 200rpx;
		padding: 10rpx;
		text-align: center;
		color: #fff;
		margin-left: auto;
		border-radius: 15rpx;
		background-image: linear-gradient(to right, rgba(43,136,254, 1), rgba(43,136,254, 0.5));
	}
	.txr{
		text-align: right;
		letter-spacing: 2rpx;
	}
	.bkitem{
		margin-bottom: 20rpx;
		background-color: #FFF;
		box-shadow: #bbb 0 0 8rpx;
		padding: 10rpx;
		// padding: 20rpx 10rpx;
		border-radius: 15rpx;
	}
	// swiper
	.swiper {
		flex: 1;
		margin-bottom: 20rpx;
		// height: 100%;
		// height: calc(100vh - 150px);
		// background-color: rgb(241, 245, 251);
		.swiper-item{
			overflow: auto;
			.orderinfo{
				margin: 20rpx 20rpx 50rpx;
				font-size: 25rpx;
				.bkdjs{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.controls{
						color: #0081ff;
						.rolsl{
							margin-right: 10rpx;
						}
					}
				}
				.bkrol{
					padding: 10rpx 0;
					// height: 60rpx;
					// line-height: 60rpx;
					.sheetc{
						font-size: 30rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>